<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>-->
<body class="gray-bg">
    
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								用户id：<input id="uId" type="text" th:value="${uid}" name="uId"/>
							</li>

							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
<!--	        <div class="btn-group-sm hidden-xs" id="toolbar" role="group">-->
<!--				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="core:prUserUrl:add">-->
<!--					<i class="fa fa-plus"></i> 添加-->
<!--				</a>-->
<!--				<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="core:prUserUrl:edit">-->
<!--					<i class="fa fa-edit"></i> 修改-->
<!--				</a>-->
<!--				<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="core:prUserUrl:remove">-->
<!--					<i class="fa fa-remove"></i> 删除-->
<!--				</a>-->
<!--				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="core:prUserUrl:export">-->
<!--						<i class="fa fa-download"></i> 导出-->
<!--				 </a>-->
<!--			</div>-->
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>

	 <!-- 图片放大后的遮罩层 -->
	 <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
		 <!-- 放大后的图片 -->
		 <div id="innerdiv" style="position:absolute;z-index: 2000">
			 <img id="bigimg" style="border:5px solid #fff;" src="" />
		 </div>
	 </div>


    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('core:prUserUrl:edit')}]];
        var removeFlag = [[${@permission.hasPermi('core:prUserUrl:remove')}]];
        var prefix = ctx + "core/prUserUrl";

        $(function() {



            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
				queryParams: queryParams,
                modalName: "贫困用户图片",
				search: false,
		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'id', 
					title : '',
					visible: false
				},
				{
					field : 'uid',
					title : '用户id',
					sortable: true
				},
				{
					field : 'type', 
					title : '图片类型',
					//0.门头照
					// 1.户口本/身份证(户主)
					// 2.户口本/身份证(低保户)
					// 3.持证照片
					// 4.存折/社保卡
					// 5.残疾证
					// 6.看病材料
					// 7.其他补充材料
					// 8.户主/低保户(手持证件照)
					// 9.房子(外观+内景)
					// 10.家电
					// 11.轿车
					// 12.问卷
					// formatter: function(value, item, index) {
					// 	if (item.type == 0) {
					// 		return '<span class="label label-success">门头照</span>';
					// 	}
					// 	else if (item.type == 1) {
					// 		return '<span class="label label-success">户口本/身份证(户主)</span>';
					// 	}
					// 	else if (item.type == 2) {
					// 		return '<span class="label label-success">户口本/身份证(低保户)</span>';
					// 	}
					// 	else if (item.type == 3) {
					// 		return '<span class="llabel label-success">持证照片</span>';
					// 	}
					// 	else if (item.type == 4) {
					// 		return '<span class="llabel label-success">存折/社保卡</span>';
					// 	}
					// 	else if (item.type == 5) {
					// 		return '<span class="label label-success">残疾证</span>';
					// 	}
					// 	else if (item.type == 6) {
					// 		return '<span class="label label-success">看病材料</span>';
					// 	}
					// 	else if (item.type == 7) {
					// 		return '<span class="label label-success">其他补充材料</span>';
					// 	}
					// 	else if (item.type == 8) {
					// 		return '<span class="label label-success">户主/低保户(手持证件照)</span>';
					// 	}
					// 	else if (item.type == 9) {
					// 		return '<span class="label label-success">房子(外观+内景)</span>';
					// 	}
					// 	else if (item.type == 10) {
					// 		return '<span class="label label-success">家电</span>';
					// 	}
					// 	else if (item.type == 11) {
					// 		return '<span class="label label-success">轿车</span>';
					// 	}
					// 	else if (item.type == 12) {
					// 		return '<span class="label label-success">问卷</span>';
					// 	}
					// }


					formatter: function(value, item, index) {
						if (item.type == 0) {
							return '<span class="label label-success">老人持身份证</span>';
						}
						else if (item.type == 1) {
							return '<span class="label label-success">全身照</span>';
						}
						else if (item.type == 2) {
							return '<span class="label label-success">老人持协议</span>';
						}
						else if (item.type == 3) {
							return '<span class="llabel label-success">协议第4页</span>';
						}
						else if (item.type == 4) {
							return '<span class="llabel label-success">门头照</span>';
						}
						else if (item.type == 5) {
							return '<span class="label label-success">室内环境照</span>';
						}
						else if (item.type == 6) {
							return '<span class="label label-success">用电安全（电线）</span>';
						}
						else if (item.type == 7) {
							return '<span class="label label-success">用火安全（厨房）</span>';
						}
						else if (item.type == 8) {
							return '<span class="label label-success">其他相关证件（残疾证等）</span>';
						}
					}
				},
				{
					field : 'url', 
					title : '图片(点击图片放大显示)',
					formatter: function(value, item, index) {
						return '<img src="' + item.url + '"  width="100" height="100"  onclick="ssclick(this)"/>'
					}
				}
				// ,
				// {
				// 	field : 'localUrl',
				// 	title : '服务器本地存储地址',
				// 	sortable: true
				// },
		        // {
		        //     title: '操作',
		        //     align: 'center',
		        //     formatter: function(value, row, index) {
		        //     	var actions = [];
		        //     	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                //         actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
				// 		return actions.join('');
		        //     }
		        // }
				]
            };
            $.table.init(options);





        });

		function ssclick(_this){
			 let _thiss = $(_this);//将当前的pimg元素作为_this传入函数
			imgShow("#outerdiv", "#innerdiv", "#bigimg", _thiss);
		}


		function queryParams(params) {
			return {
				uId:       $("#uId").val(),
				searchValue:    params.search
			};
		}


		function imgShow(outerdiv, innerdiv, bigimg, _this){
			var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
			$(bigimg).attr("src", src);//设置#bigimg元素的src属性
			/*获取当前点击图片的真实大小，并显示弹出层及大图*/
			$("<img/>").attr("src", src).load(function(){
				var windowW = $(window).width();//获取当前窗口宽度
				var windowH = $(window).height();//获取当前窗口高度
				var realWidth = this.width;//获取图片真实宽度
				var realHeight = this.height;//获取图片真实高度
				var imgWidth, imgHeight;
				var scale = 0.95;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
				if(realHeight>windowH*scale) {//判断图片高度
					imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
					imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
					if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
						imgWidth = windowW*scale;//再对宽度进行缩放
					}
				} else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
					imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
					imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
				} else {//如果图片真实高度和宽度都符合要求，高宽不变
					imgWidth = realWidth;
					imgHeight = realHeight;
				}
				$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
				var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
				var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
				$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
				$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
			});
			console.info("6")
			$(outerdiv).click(function(){//再次点击淡出消失弹出层
				console.info("7")
				$(this).fadeOut("fast");
			});
		}


	</script>
</body>
</html>